/** 需求：复选框change事件自定义传参 */
<template>
  <div class="home">
    <el-input v-model="hhh" placeholder="缓存记录" />
    <div>
      <el-checkbox
        v-for="(item, index) in reqData"
        :key="index"
        v-model="item.checked"
        @change="
          (v) => {
            checkChange(v, index, item);
          }
        "
      >{{ item.name }}：{{ item.checked ? "选中" : "未选中" }}</el-checkbox>
      <p>当前选中学校：{{ curSchool }}</p>
      <p>当前选中学校：{{ curSchoolArr | filterSchool }}</p>
      <!-- <p>
        <span v-if="curSchoolArr.length < 1"> 当前选中学校：空 </span>
        <span v-else>
          当前选中学校：
          <span v-for="(item, index) in curSchoolArr" :key="index">
            {{ index > 0 ? "," + item : item }}
          </span>
        </span>
      </p> -->
      <p>当前选中学校：{{ reqDataSd.length > 0 ? reqDataSd : "空" }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  filters: {
    filterSchool(value) {
      if (!value.length) return '空'
      console.log(value, 'filterSchool---')
      return value.join(',')
    }
  },
  data() {
    return {
      hhh: '',
      curSchool: '空',
      curSchoolArr: [],
      reqData: [
        {
          name: '上海一中',
          checked: false
        },
        {
          name: '上海er中',
          checked: false
        },
        {
          name: '上海三中',
          checked: false
        }
      ]
    }
  },
  computed: {
    reqDataSd() {
      const data = []
      this.reqData.filter(item => {
        console.log(item, 'add1')
        if (item.checked) {
          data.push(item.name)
        }
      })
      console.log(data, 'add')
      return data.join(',')
    }
  },
  mounted() {
    console.log('req--', this.reqDataSd)
  },
  methods: {
    checkChange(v, index, item) {
      console.log('data', item, index, this.reqData)
      // if (this.curSchool === "空") this.curSchool = "";
      // if (!v && this.curSchool.indexOf(item.name) != -1) {
      //   this.curSchool = this.curSchool.replace("," + item.name, "");
      //   this.curSchool = this.curSchool.replace(item.name + ",", "");
      //   this.curSchool = this.curSchool.replace(item.name, "");
      // }
      // if (v && !this.curSchool) {
      //   this.curSchool += this.reqData[index].name;
      //   return;
      // }
      // if (v && this.curSchool) {
      //   this.curSchool += "," + this.reqData[index].name;
      // }
      // if (!this.curSchool) {
      //   this.curSchool = "空";
      // }
      // if (!this.curSchoolArr) this.curSchoolArr = "空";
      if (v) {
        this.curSchoolArr.push(this.reqData[index].name)
        this.curSchool = this.curSchoolArr.join(',')
        console.log(this.curSchool, 'data', item)
      }
      if (!v && this.curSchoolArr.includes(item.name)) {
        const index = this.curSchoolArr.indexOf(item.name)
        this.curSchoolArr.splice(index, 1)
        this.curSchool = this.curSchoolArr.join(',')
      }
      if (!v && this.curSchoolArr.length === 0) {
        this.curSchool = '空'
      }
    }
  }
}
</script>
